<template>
    <div class="main">
        <div class="cmain">
            <ul>
                <li>
                    <el-select
                        v-model="value1"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请输入教室号码">
                    </el-select>
                </li>
            </ul>
            <ul>
                <li>
                    <el-select
                        v-model="value2"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请输入班级名称">
                    </el-select>
                </li>
            </ul>
            <ul>
                <li>
                    <el-select
                        v-model="value3"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请输入课程名称">
                    </el-select>
                </li>
            </ul>
            <ul>
                <li>
                    <el-select
                        v-model="value4"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请输入用户名称">
                    </el-select>
                </li>
            </ul>
            <ul>
                <li>
                    <el-button @click="submit" type="info">提交</el-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      value1: [],
      value2: [],
      value3: [],
      value4: []
    }
  },
  methods: {
    submit () {
      console.log(this.value1)
    }
  }
}
</script>

<style lang="less" scoped>
.main{
    position: fixed;
    top: 20%;
    left: 55%;
    transform: translate(-50%,0);
    height: 45%;
    width: 60%;
    background-color: #B3C0D1;
    box-shadow: 0 0 5px 10px  #D3DCE6;
    border-radius: 1%;
}
.cmain{
    position: relative;
    top: 12%;
    left: 8%;
}
.el-select{
    width: 80%;
}
.el-button{
    width: 80%;
}
.main ul li{
    list-style: none;
}
</style>
